<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0033) -->
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US"><head profile="http://gmpg.org/xfn/11"><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">


<title>Acid App Panel</title>

<link rel="stylesheet" href="css/style.css" type="text/css" media="screen">

	<!--[if lt IE 7]>
	<link rel="stylesheet" type="text/css" media="all" href="css/ie6.css" />
	<![endif]-->
	
	<!--[if gt IE 6]>
	<link rel="stylesheet" type="text/css" media="all" href="css/ie7.css" />
	<![endif]-->
	
	<!-- Fix PNG under Internet Explorer 6 -->
	<!--[if lt IE 7]>
	<style type="text/css">
		img { behavior: url(js/iepngfix.htc) !important; }
		.validate_success,
		.validate_error { behavior: url(js/iepngfix.htc) !important; }
	</style> 
	<![endif]-->

</head>
<body>
<div id="body">
	<!-- START container -->
	<div id="container">


		<!-- START header -->
		<div id="header">
			<div id="panel-top">
				<div id="logo">
					<h1><a href="#" title="APPS"><img src="images/logo.gif" alt="APPS"></a></h1>
				</div>
				
				<div id="nav">
					<ul>
						<li><a href="#" title="Test">home</a></li>
						<li><a href="#" title="Test">posts</a></li>
						<li><a href="#" title="Test">comments</a></li>
						<li><a href="#" title="Test">members</a></li>
						<li><a href="#" title="Test">settings</a></li>
					</ul>
				</div>
				
				<div id="session">
					<span>Logged as <a href="#" title="Admin">Admin</a> (<a href="#" title="Logout">logout</a>)</span>
				</div>
			</div>
			
			<div class="clear"></div>
			
			<div id="panel-middle">
				<div id="return">
					<span>&nbsp;</span>
				</div>
				
				<div id="subnav">
					<ul>
						<li><a href="#" title="Test">dashboard</a></li>
						<li><a href="#" title="Test">statistics</a></li>
						<li><a href="#" title="Test">notices</a></li>
					</ul>
				</div>
			</div>
			
			<div class="clear"></div>
			
			<div id="panel-bottom">
				<div id="headline">
					<h3>Dashboard</h3>
				</div>
			</div>
		</div>
		<!-- END header -->

	<div class="clear"></div>

	<!-- START primary -->
	<div id="primary">

		<!-- START columns -->
		<div id="columns">
			<div id="col-left">
				<div class="box">
					<p>Welcome back, <strong>Admin</strong></p>
					
					<p>This might be your welcoming message, and this is your test dashboard. Scroll down the page in order to see examples of all pre-styled site elements such as tables, lists and forms.</p>
				
					<p>Enjoy, and please, do not steal the code, or my guiding spirits will make sure you will be smashed and thrown into abbyss.</p>
				</div>
				
				<div class="box data">
					<p>This is a data box, it might contain some useful stuff, such as your website stats:</p>
					
					<ul>
						<li><span class="left">Users</span><span class="right">23</span><div class="clear"></div></li>
						<li><span class="left">Posts</span><span class="right">34</span><div class="clear"></div></li>
						<li><span class="left">Comments</span><span class="right">89</span><div class="clear"></div></li>
					</ul>
					
					<p>Notice how <a href="#" title="Links">links within notice</a> boxes (for data, error, notice and success) are being displayed.</p>
				</div>
			</div>
			
			<div id="col-right">
				<div class="box notice">
					<p>And this is some kind of a <a href="#" title="Notice">notice message</a> you should pay attention to, but to be honest, I have no idea what example text should I put here :P. Anyway, there are two columns designed for dashboard, or homepage of your app panel. They are clean and just awesome!</p>
				</div>
				
				<div class="box pleft">
					<h4>Quick Links</h4>
				
					<p>You can use simple <em>.box</em> class with additional <em>.pleft</em> class to create a quick links section. I will use it to create quick links to different elements on this page using anchors.</p>
					
					<ul>
						<li><a href="#notices" title="Title">Notice boxes</a></li>
						<li><a href="#tables" title="Title">Tables</a></li>
						<li><a href="#forms" title="Title">Forms</a></li>
						<li><a href="#images" title="Images">Set of images</a></li>
						<li><a href="#pagination" title="Pagination">Pagination</a></li>
					</ul>
					
					<p>So called <em>.p*</em> classes can be used to add attional padding to elements on top, bottom, left or right.</p>
				</div>
			</div>
			
			<div class="clear"></div>
		</div>
		<!-- END columns -->
		
		
		
		<div class="clear"></div>
		
		
		
		<!-- START content -->
		<!-- Content is being used to display other pages than dashboard which is using #columns box in order
		to divide start page into two separated columns -->
		<div id="content">
			<a name="notices"></a><h3>H3 headline can be used within #content box.</h3>
		
			<p>Below you see examples of three notice boxes, for positive, negative and neutral message.</p>
		
			<!-- few notice boxes -->
			<div class="success"><span>Q'pla!</span><p>This <a href="#" title="link">is</a> a success...</p></div>
			<div class="error"><span>Oh crap...</span><p>We <a href="#" title="link">are</a> all doomed...</p></div>
			<div class="notice"><span>You're talking to me?</span><p>Easy big fella, just kidding...</p></div>
		
		
			
			<a name="tables"></a><h3>Time to show you some tables</h3>
		
			<p>Designing good looking tables isn't an easy task, so forgive me what you see below :P</p>
		
					<!--
					Classical Table below, must be used with thead and tbody tags;
					-->
					<table cellspacing="0" cellpadding="0"><!-- Table -->
						<thead>
							<tr>
								<th>Title</th>
								<th>Author</th>
								<th>Description</th>
								<th>Views</th>
								<th>Status</th>
								<th>Action</th>
							</tr>
						</thead>
					
						<tbody>
							<tr>
								<td>Lorem Ipsum</td>
								<td>Username</td>
								<td>Lorem ipsum dolor sit amet,</td>
								<td>13</td>
								<td>true</td>
								<td><a class="button" href="#">edit</a><a class="button" href="#">delete</a></td>
							</tr>
							
							<tr class="alt">
								<td>Lorem Ipsum</td>
								<td>Username</td>
								<td>Lorem ipsum dolor sit amet,</td>
								<td>13</td>
								<td>true</td>
								<td><a class="button" href="#">edit</a><a class="button" href="#">delete</a></td>
							</tr>
							
							<tr>
								<td>Lorem Ipsum</td>
								<td>Username</td>
								<td>Lorem ipsum dolor sit amet,</td>
								<td>13</td>
								<td>true</td>
								<td><a class="button" href="#">edit</a><a class="button" href="#">delete</a></td>
							</tr>
							
							<tr class="alt">
								<td>Lorem Ipsum</td>
								<td>Username</td>
								<td>Lorem ipsum dolor sit amet,</td>
								<td>13</td>
								<td>true</td>
								<td><a class="button" href="#">edit</a><a class="button" href="#">delete</a></td>
							</tr>
							
							<tr>
								<td>Lorem Ipsum</td>
								<td>Username</td>
								<td>Lorem ipsum dolor sit amet,</td>
								<td>13</td>
								<td>true</td>
								<td><a class="button" href="#">edit</a><a class="button" href="#">delete</a></td>
							</tr>
						</tbody>
					</table><!-- END Table -->
					
					
					
			<a name="forms"></a><h3>Forms and input fields</h3>
			
				<!--
				Standard form within a fieldset tag;
				-->
				<form method="post" action="#"><!-- Form -->
					<fieldset>
						<p class="input_field">
							<label for="a">Small Field</label>
	 						<input class="input smallfield" name="a" type="text" value="">
						</p>
						
						<!-- hack for stupid IE7 --><div class="clear"></div>
						
						<p class="input_field">
							<label for="b">Medium Field</label>
	 						<input class="input mediumfield" name="b" type="text" value=""> <span class="validate_success">Validation successful!</span>
						</p>
						
						<!-- hack for stupid IE7 --><div class="clear"></div>
						
						<p class="input_field">
							<label for="c">Medium Field</label>
	 						<input class="input mediumfield" name="c" type="text" value=""> <span class="validate_error">Validation failed!</span>
						</p>
						
						<!-- hack for stupid IE7 --><div class="clear"></div>
						
						<p class="input_field">
							<label for="d">Big Field</label>
	 						<input class="input bigfield" name="d" type="text" value="">
						</p>
						
						<!-- hack for stupid IE7 --><div class="clear"></div>
						
						<p class="input_field">
						<textarea class="input textbox" cols="70" rows="8"></textarea>
						</p>
						
						<!-- hack for stupid IE7 --><div class="clear"></div>
						
						<p>
						<input class="submit" type="submit" value="Submit button">
						<a href="#" class="button">... and classic link button</a>
						</p>
					</fieldset>
				</form><!-- /Form -->
		
			<a name="images"></a><h4>Example set of images</h4>
			
			<p>Check out my themes! Umm, I mean - take a look how the images are being styled. Notice the margin after 4th image - it is using <em>.mright</em> class to create additional space.</p>
			
			<a href="#" title="The Simplest Admin Template"><img src="images/72100.jpg" alt="The Simplest Admin Template"></a>
			<a href="#" title="Splash Manager"><img src="images/56051.jpg" alt="Splash Manager"></a>
			<a href="#" title="Paraportica - Clean WordPress Theme"><img src="images/66988.jpg" alt="Paraportica - Clean WordPress Theme"></a>
			<a href="#" title="Coffee Break Manager - Admin Theme"><img class="mright" src="images/49435.jpg" alt="Coffee Break Manager - Admin Theme"></a>
			<a href="#" title="Glossy Zodiac Icons"><img src="images/89975.jpg" alt="Glossy Zodiac Icons"></a>
			<a href="#" title="Runes Icons Set fron Norse Mythology"><img src="images/88977.jpg" alt="Runes Icons Set fron Norse Mythology"></a>
			<a href="#" title="Simple Pumpkin"><img src="images/76848.jpg" alt="Simple Pumpkin"></a>
			<a href="#" title="Runes Signs Set"><img src="images/90356.jpg" alt="Runes Signs Set"></a>

			<a name="pagination"></a><h4>Pagination as an opportunity to show nice H4 headline</h4>
		
					<!-- Page Navigation -->
					<ul class="paginator">
						<li class="previous"><a href="#">Previous</a></li>
						<li class="current"><a href="#">1</a></li>
						<li class="page"><a href="#">2</a></li>
						<li class="page"><a href="#">3</a></li>
						<li class="page"><a href="#">4</a></li>
						<li class="empty">(...)</li>
						<li class="page"><a href="#">23</a></li>
						<li class="next"><a href="#">Next</a></li>
					</ul>
					<!-- /Page Navigation -->
		
		</div>
		<!-- END content -->
		
		
	</div>
	<!-- END primary -->

	<div class="clear"></div>

	<!-- START footer -->
	<div id="footer">
		<div class="footer"></div>
	</div>
	<!-- END footer -->


	</div>
	<!-- END container -->

</div>
</body></html>